<template>
  <a-modal
    style="background-color: rgb(207, 37, 37)"
    title="Title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>{{ ModalText }}</p>
  </a-modal>
</template>

<script>
export default {
  name: "",
  props: {
    visible: { type: Boolean, default: true },
  },
  data() {
    return {
      confirmLoading: false,
      ModalText: "Content of the modal",
    };
  },
  methods: {
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
};
</script>

<style>
</style>